<template>
  <div class="content-box">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="ts" name="pieChart">
import ECharts from "@/components/ECharts/index.vue";
import { watch } from "vue";
import { reactive, onMounted } from "vue";
const props = defineProps<{
  data: any[];
  color: string[];
}>();

watch(
  () => props.data,
  () => {
    changeOption();
  },
  {
    deep: true
  }
);

let option: any = reactive({});
// const option: any = reactive({
//   tooltip: {
//     trigger: "item"
//   },
//   legend: {
//     show: false
//     // top: "20%",
//     // right: "20%",
//     // orient: "vertical",
//     // icon: "circle",
//     // itemGap: 12,
//     // itemWidth: 8,
//     // itemHeight: 8,
//     // textStyle: {
//     //   rich: {
//     //     a: {
//     //       fontSize: 14,
//     //       color: "rgba(0, 0, 0, 0.8)"
//     //     }
//     //   }
//     // }
//   },
//   series: {
//     name: "监控设备",
//     type: "pie",
//     radius: ["40%", "60%"],
//     avoidLabelOverlap: false,
//     label: {
//       show: true,
//       position: "center",
//       rich: {
//         a: {
//           color: "rgba(0, 0, 0, 1)",
//           fontSize: 20,
//           padding: 4,
//           fontWeight: 700
//         },
//         b: {
//           color: "rgba(0, 0, 0, 0.8)",
//           fontSize: 14,
//           fontWeight: 400
//         }
//       },
//       formatter: () => {
//         return "告警分布";
//       }
//     },
//     emphasis: {
//       label: {
//         show: false
//       },
//       itemStyle: {
//         opacity: 1
//       }
//     },
//     labelLine: {
//       show: false
//     },
//     data: []
//   },
//   color: props.color
// });
const changeOption = () => {
  if (props.data) {
    const yAxis: any = [];
    for (let i = 0; i < props.data.length; i++) {
      yAxis.push({
        value: props.data[i].count,
        name: props.data[i].type_cn
      });
    }
    option = {
      tooltip: {
        trigger: "item"
      },
      legend: {
        show: false
        // top: "20%",
        // right: "20%",
        // orient: "vertical",
        // icon: "circle",
        // itemGap: 12,
        // itemWidth: 8,
        // itemHeight: 8,
        // textStyle: {
        //   rich: {
        //     a: {
        //       fontSize: 14,
        //       color: "rgba(0, 0, 0, 0.8)"
        //     }
        //   }
        // }
      },
      series: {
        name: "告警分布",
        type: "pie",
        radius: ["40%", "60%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          rich: {
            a: {
              color: "rgba(0, 0, 0, 1)",
              fontSize: 20,
              padding: 4,
              fontWeight: 700
            },
            b: {
              color: "rgba(0, 0, 0, 0.8)",
              fontSize: 14,
              fontWeight: 400
            }
          },
          formatter: () => {
            return "告警分布";
          }
        },
        emphasis: {
          label: {
            show: false
          },
          itemStyle: {
            opacity: 1
          }
        },
        labelLine: {
          show: false
        },
        data: yAxis
      },
      color: props.color
    };
    option.series["data"] = yAxis;
  }
};

onMounted(() => {
  changeOption();
});
</script>
